<template>
	<view class="container">
		<view class="days flex justify-between margin-top padding-left padding-right">
			<view @tap="pickDate(item)" class="week-day text-center text-sm flex flex-direction justify-center" :class="[(pickDay && pickDay === item.day) ? 'active' : '']" v-for="(item, index) in days" :key="index">
				<view class="week">{{ item.week }}</view>
				<view class="day">{{ item.day }}</view>
			</view>
		</view>
		<view class="list-container margin-top padding-left padding-right">
			<view :url="`/pages/group_course/show?id=${item.id}`" v-for="(item, index) in groupCourses" :key="index" class="primary-bg i-list-item radius margin-top flex align-center">
				<view class="image-wrapper radius margin-left-xs">
					<image @tap="previewImage" :data-src="item.cover_url + '?v=' + Math.random()" class="i-image" :src="item.cover_url + '?v=' + Math.random()" mode="aspectFit"></image>
				</view>
				<view @tap="showGroupCourse(item.id)" class="info-wrapper padding-right-sm padding-bottom-xs flex flex-direction justify-between">
					<view class="main-info-wrapper">
						<view class="text-white margin-top-xs">
							<text class="title text-xl">{{item.title}}</text>
							<text class="text-gray margin-left-xs text-sm">{{item.intro}}</text>
						</view>
						<view class="expert text-xs flex margin-top-sm">
							<view class="expert-item bg-white margin-right-xs" v-for="(tagItem, tagIndex) in item.tags" :key="tagIndex">{{tagItem}}</view>
						</view>
					</view>
					<view class="price-info flex justify-between">
						<view class="left-wrapper flex justify-center align-center">
							<view class="avatar-wrapper">
								<image :data-src="item.coach_cover_url + '?v=' + Math.random()" class="i-avatar" :src="item.coach_cover_url + '?v=' + Math.random()" mode="aspectFit"></image>
							</view>
							<view class="text-white text-sm margin-left-xs">{{item.course_time}}</view>
						</view>
						<view><text class="text-xl price">{{item.price}}</text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import util from '@/utils/util.js';
import groupCourse from '@/api/group_course.js';

export default {
	data() {
		return {
			currentYear: 1970,   // 年份
			currentMonth: 1,  // 月份
			currentDay: 1,    // 日期
			currentWeek: 1,    // 星期
			weeks: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
			days: [],
			pickDay: '',
			groupCourses: []
		}
	},
	onLoad () {
		this.initData(null);
		this.getGroupCourses(this.pickDay);
	},
	onPullDownRefresh() {
		this.initData(null);
		this.getGroupCourses(this.pickDay);
		uni.stopPullDownRefresh();
	},
	methods: {
		formatDate (year, month, day) {
			const y = year
			let m = month
			if (m < 10) m = `0${m}`
			let d = day
			if (d < 10) d = `0${d}`
			return `${y}-${m}-${d}`
		},
		initData (cur) {
			let date = ''
			if (cur) {
				date = new Date(cur)
			} else {
				date = new Date()
			}
			this.currentDay = date.getDate();          // 今日日期 几号
			this.currentYear = date.getFullYear();       // 当前年份
			this.currentMonth = date.getMonth() + 1;    // 当前月份
			this.currentWeek = date.getDay(); // 1...6,0   // 星期几
			if (this.currentWeek === 0) {
				this.currentWeek = 7;
			}
			const str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);// 今日日期 年-月-日
			this.days.length = 0;
			
			for (let i = this.currentWeek - 1; i >= 0; i -= 1) {
				const d = new Date(str);
				d.setDate(d.getDate() - i);
				const dayStr = (d.getMonth() + 1) + '.' + d.getDate();
				this.days.push({
					week: this.weeks[this.currentWeek - 1 - i],
					day: dayStr
				});
			}
			for (let i = 1; i <= 7 - this.currentWeek; i += 1) {
				const d = new Date(str);
				d.setDate(d.getDate() + i);
				const dayStr = (d.getMonth() + 1) + '.' + d.getDate();
				this.days.push({
					week: this.weeks[this.currentWeek - 1 + i],
					day: dayStr
				});
			}
			this.pickDay = this.currentMonth + '.' + this.currentDay;
		},
		pickDate(item) {
			this.pickDay = item.day;
			this.getGroupCourses(this.pickDay)
		},
		async getGroupCourses(pickDay) {
			const res = await groupCourse.list({day: pickDay});
			this.groupCourses = res.data;
		},
		previewImage(e) {
			const current = e.target.dataset.src;
			uni.previewImage({
				urls: [current],
			});
		},
		showGroupCourse(id) {
			const url = `/pages/group_course/show?id=${id}`;
			util.toPage(url);
		}
	}
}
</script>

<style scoped lang="less">
.container {
	.days {
		.week-day {
			width: 80upx;
			height: 80upx;
			&.active {
				background-color: #4f87f7;
				color: white;
				border-radius: 8upx;
			}
		}
	}
	.list-container {
		.i-list-item {
			height: 220upx;
			.image-wrapper {
				width: 200upx;
				height: 200upx;
				.i-image {
					border-radius: 10upx;
					height: 100%;
				}
			}
			.info-wrapper {
				margin-left: 15upx;
				width: 100%;
				height: 100%;
				.expert {
					.expert-item {
						padding: 3upx 8upx;
						border-radius: 5upx;
					}
				}
				.price-info {
					width: 100%;
					.left-wrapper {
						.avatar-wrapper {
							width: 40upx;
							height: 40upx;
							border-radius: 50%;
							.i-avatar {
								border-radius: 50%;
								height: 100%;
							}
						}
					}
					.price {
						color: #f6ca44;
					}
				}
			}
			.btn-area {
				margin-left: 60upx;
				.btn-buy {
					width: 120upx;
					height: 44upx;
					line-height: 44upx;
					border-radius: 4upx;
					background: #485575;
					border: none;
				}
			}
		}
	}
}
</style>
